/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item>
        <el-button type="primary" @click="clickExportTag">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          action
          class="upload-demo"
          :http-request="checkFileSure"
          :on-remove="handleRemove"
          :file-list="fileList">
          <el-button size="small" type="primary">导入</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addTag">新增</el-button>
      </el-form-item>

    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}"
              @expand-change="handleExpand" :row-class-name="tableRowClassName">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <!--      <el-table-column type="expand" >-->
      <!--        <template v-slot="scope">-->
      <!--          <el-table  :data="scope.row.tagProperties" style="width: 100%" :show-header="false" :row-class-name="tableRowClassNameChild">-->
      <!--            <el-table-column label="序号" width="50"></el-table-column>-->
      <!--            <el-table-column width="150px">-->
      <!--            </el-table-column>-->
      <!--            <el-table-column prop="tagProps" label="属性名"></el-table-column>-->
      <!--&lt;!&ndash;            <el-table-column prop="tagType" label="属性类型"></el-table-column>&ndash;&gt;-->
      <!--            <el-table-column prop="defaultValue" label="默认值"></el-table-column>-->
      <!--          </el-table>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column prop="name" label="标签名称"></el-table-column>
      <!--      <el-table-column label="属性名"></el-table-column>-->
      <!--&lt;!&ndash;      <el-table-column label="属性类型"></el-table-column>&ndash;&gt;-->
      <!--      <el-table-column label="默认值"></el-table-column>-->
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button class="common-btn" @click="editTag(scope.row)">编辑</el-button>
          <el-button class="delete-btn" @click="deleteTag(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
        <el-pagination
            style="margin-top: 20px"
            layout="total, sizes, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="formInline.pageNumber"
            :total="formInline.total">
        </el-pagination>

    <modelDialog v-if="ModelDialogShow"
                 :ModelDialogShow="ModelDialogShow"
                 :modelParam="modelParam"
                 @closeDialog="closeDialog"
                 @showHistoryDialog="showHistoryDialog"></modelDialog>
    <!--        <modelHistoryDialog v-if="ModelHistoryDialogShow"-->
    <!--                     :ModelHistoryDialogShow="ModelHistoryDialogShow"-->
    <!--                     :modelHistoryParam="modelHistoryParam"-->
    <!--                     @closeDialog="closeHistoryDialog"></modelHistoryDialog>-->
  </div>
</template>

<script>
import {delTag, exportTag, showNebula, showTagProperty, treatDetail, importTag} from "../../../../api/fault/index"
import {formatDate} from "@/utils/DateFormat"
import modelDialog from "./addDialog";
// import modelHistoryDialog from "./modelHistoryDialog";
import {tableRowClassName, tableRowClassNameChild} from '../../../../components/tableStyle';

export default {
  components: {
    modelDialog,
    // modelHistoryDialog
  },
  data() {
    return {
      uploadForm: new FormData(),
      tableRowClassName,
      tableRowClassNameChild,
      fileList:[],
      option: [],
      tableData: [],
      optionsListCity: [],
      optionsListDistrict: [],
      optionsListStation: [],
      formInline: {
        pageSize: 20,
        pageNumber: 1,
        total: 4
      },
      modelParam: {},
      modelHistoryParam: {},
      actionParam: {
        modelId: '',
        modelType: '',
        action: ''
      },
      ModelDialogShow: false,
      ModelHistoryDialogShow: false,
    };
  },
  mounted() {
    this.getInit()
  },
  methods: {
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getInit()
    },
    formaTime(row, col) {
      return formatDate("YYYY-mm-dd HH:MM:SS", row[col.property])
    },
    async getModelParam(model) {
      await this.getDetail(model.id)
      this.modelParam.modelId = model.id
      this.modelParam.modelName = model.modelName
      this.modelParam.modelType = model.modelType
      this.modelParam.modelRule = model.ruleId
    },
    async getDetail(modelId) {
      await treatDetail({faultId: modelId}).then((res) => {
        this.modelParam.model = res.data
      })
    },
    closeDialog() {
      this.ModelDialogShow = false
      this.refreshPage()
    },
    closeHistoryDialog() {
      this.ModelHistoryDialogShow = false
    },
    showHistoryDialog(data) {
      this.ModelHistoryDialogShow = true
      this.modelHistoryParam = data
    },
    getInit() {
      this.refreshPageByInit()
    },
    refreshPageByInit() {
      this.refreshPage({})
    },
    refreshPageByCondition() {
      this.refreshPage()
    },
    refreshPage() {
      showNebula({showName: "tags"}).then((res) => {
        if (res) {
          this.tableData = res.data.nameList
          this.formInline.total=res.data.nameListSize
        }
      })
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val
      this.getInit()
    },
    handleExpand(item) {
      console.info(item)
      showTagProperty(item.name).then((res) => {
        this.tableData.forEach(el => {
          if (item.id === el.id) {
            this.$set(item, 'tagProperties', res.data)
            item.tagProperties = res.data
          }
        })
      })
    },
    addTag() {
      this.ModelDialogShow = true
      this.modelParam = {}
      this.modelParam.type = "add"
    },
    editTag(row) {
      this.ModelDialogShow = true
      this.modelParam = row
      this.modelParam.type = "edit"
    },
    deleteTag(row) {
      this.$confirm("确认删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "messagebox-button",
        cancelButtonClass: "messagebox-button"
      }).then(() => {
        delTag(row.name)
            .then((res) => {
              if (res && res.code === 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message.error("删除失败: " + res.msg);
              }
              this.refreshPage();
            })
            .catch((err) => {
              this.$message.error("删除失败");
            });
      });
    },
    clickExportTag() {
      exportTag().then((res) => {
        const blob = new Blob([res], {
          type: "application/octet-stream"
        })
        // 获取heads中的filename文件名
        const downloadElement = document.createElement('a')
        // 创建下载的链接
        downloadElement.href = window.URL.createObjectURL(blob)
        // 下载后文件名
        downloadElement.download = "标签.xlsx"
        document.body.appendChild(downloadElement)
        // 点击下载
        downloadElement.click() // 下载完成移除元素
        document.body.removeChild(downloadElement)
      })
    },
    handleRemove(){

    },
    checkFileSure(file) {
      this.$confirm('确认导入"' + file.file.name + '"吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.uploadForm.append('file', file.file);
        importTag(this.uploadForm).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "导入成功",
              type: "success",
            });
            this.refreshPage()
            this.fileList = []
          }else {
            this.$message.error('导入失败：' + res.msg);
          }
        })

      }).finally(() => {
        // document.querySelector('#fileinput').value = '';
        // this.$refs.filebox.value = '';
        // this.uploadForm = new FormData()
        // console.log(document.querySelector('#fileinput').files[0]);
        // this.fileName = "";
      });
    }
  }
}
</script>

<style scoped>

</style>
